<template>
  <section>
    <div class="flex items-center justify-between mb-6">

      <h2 class="text-2xl font-bold text-gray-800 mb-3 flex items-center">
        <i class="fa fa-comments text-pink-500 mr-2"></i>用户评论
      </h2>
      <!-- 添加评论按钮 -->
      <!-- <button @click="showCommentModal = true"
        class="bg-pink-500 text-white rounded-full w-14 h-10 flex items-center justify-center shadow-lg hover:bg-pink-600 transition-all transform hover:scale-105">
        <i class="fa fa-plus text-xl"></i>
      </button> -->
    </div>
    <div class="space-y-6">
      <!-- 评论1 -->
      <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow" v-for="(item, i) in comments"
        :key="i">
        <div class="flex items-center mb-4">
          <img :src="item.avatar" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div class="ml-3">
            <h3 class="font-medium text-gray-900">{{ item.nickName }}</h3>
            <p class="text-sm text-gray-500">{{ item.publishTime }}</p>
          </div>
        </div>
        <p class="text-gray-700">{{ item.content }}
        </p>
        <!-- 子评论列表 -->
        <div class="ml-4 mt-4 space-y-4 border-l-2 border-gray-100 pl-4" v-if="item.children && item.children.length > 0">
          <div v-for="(child, index) in item.children" :key="index" class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center mb-2">
              <img :src="child.avatar" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
              <div class="ml-2">
                <h4 class="font-medium text-gray-900 text-sm">{{ child.nickName }}  <span v-if="child.otherNickName" style="color:#999;">回复</span> <span v-if="child.otherNickName" style="color:#666;">{{ child.otherNickName }}</span> </h4>
                <p class="text-xs text-gray-500">{{ child.publishTime }}</p>
              </div>
            </div>
            <p class="text-gray-700 text-sm">{{ child.content }}</p>
            <div class="mt-2 flex items-center justify-between text-xs text-gray-500">
              <button class="flex items-center hover:text-pink-500 transition-colors" @click="handleLike(child)">
                <i class="fa fa-heart-o mr-1"></i> {{ child.likes }}
              </button>
              <!-- <button class="flex items-center hover:text-pink-500 transition-colors" @click="handleReply(child)">
                回复
              </button> -->
            </div>
          </div>
        </div>
        <div class="mt-3 flex items-center justify-between text-sm text-gray-500" >
          <button class="flex items-center hover:text-pink-500 transition-colors" @click="handleLike(item)">
            <i class="fa fa-heart-o mr-1"></i> {{ item.likes }}
          </button>
           <!-- <button class="flex items-center hover:text-pink-500 transition-colors" @click="handleReply(item)">
            回复
          </button> -->
        </div>
      </div>

    </div>
    <!-- 评论弹窗 -->
    <div v-if="showCommentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-20 p-4">
      <div class="bg-white rounded-xl w-full max-w-md p-6 transform transition-all">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold text-gray-800">发表评论</h3>
          <button @click="close()" class="text-gray-500 hover:text-gray-700">
            <i class="fa fa-times"></i>
          </button>
        </div>

        <form @submit.prevent="submitComment">
          <div class="mb-4">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="comment">
              评论内容
            </label>
            <textarea id="comment" v-model="newComment.content" rows="4"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500"
              placeholder="请输入您的评论..." required></textarea>
          </div>

          <!-- <div class="mb-6">
            <label class="block text-gray-700 text-sm font-bold mb-2" for="name">
              昵称
            </label>
            <input id="name" v-model="newComment.name" type="text"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500"
              placeholder="请输入您的昵称" required />
          </div> -->

          <div class="flex justify-end space-x-3">
            <button type="button" @click="showCommentModal = false"
              class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors">
              取消
            </button>
            <button type="submit"
              class="px-4 py-2 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition-colors">
              发表评论
            </button>
          </div>
        </form>
      </div>
    </div>
  </section>
</template>

<script>
import { listComment, getComment, delComment, addComment, updateComment } from "@/api/demo/comment";
import { h } from "vue";

export default {
  name: 'CommentSection',
  props: {
    postId: {
      type: [String, Number],
      required: true
    },
    postType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 评论数据可以在后续扩展中从API获取
      comments: [],
      showCommentModal: false,
      newComment: {
        content: '',
      }
    };
  },
  mounted() {
    // 在这里可以根据postId和postType获取对应的评论数据
    this.fetchComments();
  },
  methods: {
    // 可以添加获取评论的方法
    fetchComments() {
      // 根据this.postId和this.postType获取评论
      listComment({ articleId: this.postId, type: this.postType }).then(res => {
        if (res.code == 200) {
          this.comments = res.rows;
          // console.log(this.comments);
        }
      });
    },

    submitComment() {
      // 这里可以添加提交评论的逻辑
      this.newComment.articleId = this.postId;
      this.newComment.type = this.postType;
      this.newComment.openId = localStorage.getItem('openId');
      console.log('提交评论:', this.newComment);

      addComment(this.newComment).then(res => {
        if (res.code == 200) {
          // 如果是回复子评论，则添加到对应父评论的children中
          if (this.newComment.parentId) {
            const parentComment = this.comments.find(comment => comment.id === this.newComment.parentId);
            if (parentComment) {
              if (!parentComment.children) {
                parentComment.children = [];
              }
              parentComment.children.push(res.data);
            }
          } else {
            // 否则作为顶级评论添加
            this.comments.push(res.data);
          }
          this.showCommentModal = false;
          // 这里可以添加成功提示
          this.$message.success('评论成功！');
        }
      });
    },
    handleLike(item){
      updateComment({ id: item.id, likes: item.likes + 1 }).then(res => {
        if (res.code == 200) {
          item.likes++;
        }
      });
    },
    handleReply(item){
      this.newComment.parentId = item.parentId?item.parentId:item.id;
      this.newComment.otherOpenId = item.openId;
      this.showCommentModal = true;
    },
    close() {
      this.showCommentModal = false;
      this.newComment = {
        content: '',
      };
    }
  }
};
</script>

<style scoped>
/* 可以根据需要添加一些自定义样式 */
</style>